<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            /* simple css-based tooltip */ .tooltip {
                background-color: #000;
                border: 1px solid #fff;
                padding: 10px 15px;
                width: 200px;
                display: none;
                color: #fff;
                text-align: left;
                font-size: 12px;
                /* outline radius for mozilla/firefox only */
                -moz-box-shadow: 0 0 10px #000;
                -webkit-box-shadow: 0 0 10px #000;
            }
        </style>
        <style type="text/css">
            #myform {
                border: 1px outset #ccc;
                background: #fff url(./img/gradient/h600.png) repeat-x;
                padding: 20px;
                margin: 20px auto;
                width: 350px;
                font-size: 12px;
                -moz-border-radius: 4px;
            } #myform h3 {
                text-align: center;
                margin: 0 0 10px 0;
            }
            
            /* http://www.quirksmode.org/css/forms.html */ #inputs label, #inputs input, #inputs textarea, #inputs select {
                display: block;
                width: 150px;
                float: left;
                margin-bottom: 20px;
            } #inputs label {
                text-align: right;
                width: 75px;
                padding-right: 20px;
            } #inputs br {
                clear: left;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <form id="myform" action="#">
            <h3>Registration Form</h3>
            <div id="inputs">
                <!-- username -->
                <label for="username">
                    Username
                </label>
                <input id="username" title="Must be at least 8 characters."/>
                <br/>
                <!-- password -->
                <label for="password">
                    Password
                </label>
                <input id="password" type="password" title="Make it hard to guess." />
                <br/>
                <!-- email -->
                <label for="email">
                    Email
                </label>
                <input id="email" title="We won't send you any marketing material." />
                <br/>
                <!-- message -->
                <label for="body">
                    Message
                </label>
                <textarea id="body" title="What's on your mind?">
                </textarea>
                <br/>
                <!-- message -->
                <label for="where">
                    Select one
                </label>
                <select id="where" title="Select one of these options">
                    <option>-- first option --</option>
                    <option>-- second option --</option>
                    <option>-- third option --</option>
                </select>
                <br/>
            </div>
            <!-- email -->
            <label>
                I accept the terms and conditions<input type="checkbox" id="check" title="Required to proceed" />
            </label>
            <p>
                <button type="button" title="This button won't do anything">
                    Proceed
                </button>
            </p>
        </form>
        <script type="text/javascript">
            // select all desired input fields and attach tooltips to them
            $("#myform :input").tooltip({
                // place tooltip on the right edge
                position: "center right",
                // a little tweaking of the position
                offset: [-2, 10],
                // use the built-in fadeIn/fadeOut effect
                effect: "fade",
                // custom opacity setting
                opacity: 0.7
            
            });
        </script>
    </body>
</html>
